<div class="row mail-client-container transparent">
  <div class="col-md-12">
    <div ba-panel ba-panel-class="xmedium-panel mail-panel">
      <div class="letter-layout">
        <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
          <div class="text-center">
            <button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
              Compose
            </button>
          </div>
          <div ng-repeat="t in tabCtrl.tabs" ui-sref-active="active" class="mail-navigation"
               ui-sref="components.mail.label({label: t.label})" ng-click="selectTab(t.label)">
            {{t.name}}<span class="new-mails" ng-show="t.newMails">{{t.newMails}}</span>
          </div>
          <div class="labels">
            <div class="labels-title">

            </div>
            <div class="labels-container">
              <div class="label-item">
                <span class="tag label work">Work</span>
              </div>
              <div class="label-item">
                <span class="tag label family">Family</span>
              </div>
              <div class="label-item">
                <span class="tag label friend">Friend</span>
              </div>
              <div class="label-item">
                <span class="tag label study">Study</span>
              </div>
            </div>
          </div>
          <div class="add-label-container">
            <i class="ion-plus-round"></i><span class="label-input-stub">Add new label</span>
          </div>
        </div>
        <ui-view></ui-view>
      </div>
    </div>
  </div>
</div>